<template>
  <div class="h-full">
    <a-page-header title="数据分析" @back="handleClickBack"></a-page-header>
    <a-divider :margin="0"></a-divider>
    <div class="content">
      <div class="grid grid-cols-2 gap-5" style="padding: 20px 24px">
        <a-card class="col-span-2">
          <div class="flex justify-between">
            <div class="card-title">购入排行TOP15</div>
            <div></div>
          </div>
          <div ref="ChartRef1"  class="card-ehcart"></div>
        </a-card>
        <a-card class="col-span-2">
          <div class="flex justify-between">
            <div class="card-title">售出排行TOP15</div>
            <div></div>
          </div>
          <div ref="ChartRef4" class="card-ehcart"></div>
        </a-card>
        <a-card>
          <div class="flex justify-between">
            <div class="card-title">买家-本地外地占比</div>
            <div></div>
          </div>
          <div ref="ChartRef2"  class="card-ehcart"></div>
        </a-card>
        <a-card>
          <div class="flex justify-between">
            <div class="card-title">卖家-本地外地占比</div>
            <div></div>
          </div>
          <div ref="ChartRef3"  class="card-ehcart"></div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, shallowRef } from 'vue';
import * as echarts from 'echarts';
import { useRouter, useRoute } from 'vue-router';
import { getCpGjzb, getCpXxzb, getCpgrPx, getCpxxPx } from '@/api/productInquiry';

const router = useRouter();
const route = useRoute();
const ChartRef1 = ref();
const ChartRef2 = ref();
const ChartRef3 = ref();
const ChartRef4 = ref();

const echart1Instance = shallowRef();
const echart2Instance = shallowRef();
const echart3Instance = shallowRef();
const echart4Instance = shallowRef();


function getBarOptions(xAxisData = [], seriesData = []) {
  return {
    tooltip: {
      trigger: 'axis',
      valueFormatter(value) {
        return value + ' 万'
      }
    },
    legend: {
      show: false
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '3%',
      top: '40px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: '#EBF0FA'
        }
      },
      axisLabel: {
        show: true,
        color: '#A3B0CC',
        rotate: -30
      }
    },
    yAxis: {
      type: 'value',
      name: '单位：万',
      nameTextStyle: {
        lineHeight: 18,
        color: '#A3B0CC'
      },
      axisLabel: {
        show: true,
        color: '#A3B0CC'
      },
      splitLine: {
        lineStyle: {
          color: '#EBF0FA'
        }
      }
    },
    series: [
      {
        type: 'bar',
        color: '#4C7FFE',
        data: seriesData,
        itemStyle: {
          borderRadius: 4,
        }
      }
    ]
  }
}

// 柱状图
function setChart1() {
  getCpgrPx({ ...route.query }).then((res) => {
    const xAxisData = [];
    const seriesData = [];
    res.forEach((item) => {
      xAxisData.push(item['公司名称']);
      seriesData.push(item['金额']);
    });
    nextTick(() => {
      echart1Instance.value = echarts.init(ChartRef1.value);
      echart1Instance.value.setOption(getBarOptions(xAxisData, seriesData));
    });
  })
}

// 柱状图
function setChart4() {
  getCpxxPx({ ...route.query }).then((res) => {
    const xAxisData = [];
    const seriesData = [];
    res.forEach((item) => {
      xAxisData.push(item['公司名称']);
      seriesData.push(item['金额']);
    });
    nextTick(() => {
      echart4Instance.value = echarts.init(ChartRef4.value);
      echart4Instance.value.setOption(getBarOptions(xAxisData, seriesData));
    });
  })
}

function setPieOptions (seriesData) {
  const total = seriesData.reduce((pre, next) => { return pre.value + next.value});
  return {
    tooltip: {
      trigger: 'item',
      valueFormatter(value) {
        return (value * 100 / total).toFixed(2) + ' %'
      }
    },      
    legend: {
      orient: 'vertical',
      top: 'center',
      right: '25%',
      data: ['本地', '外地'],
      icon: 'circle',
      formatter(name) {
        const target = seriesData.find((item) => item.name === name);
        return `{a|${target.name}} {b|${target.value}} {c|万}`;
      },
      textStyle: {
        rich: {
          a: {
            color: '#465A80',
            fontSize: 12,
            padding: [0, 8]
          },
          b: {
            color: '#465A80',
            fontSize: 14,
            fontWeight: 'bold'
          },
          c: {
            color: '#A3B0CC',
            fontSize: 12,
            padding: [0, 0, 0, 4]
          },
        }
      }
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '3%',
      top: '40px',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        center: ['35%', '50%'],
        data: seriesData,
        itemStyle: {
          normal: {
            color: function(params) {
              const colorList = ['#4CD4F0','#4C7FFE'];
              return colorList[params.dataIndex % colorList.length];
            }
          }
        },
        label: {
          show: false
        }
      }
    ]
  }
}

// 饼图1
function setChart2() {
  getCpXxzb({ ...route.query }).then((res) => {
    nextTick(() => {
      const seriesData = [
        { value: res?.[0]?.['本地'] || 0, name: '本地' }, 
        { value: res?.[0]?.['外地'] || 0, name: '外地' }
      ]
      echart2Instance.value = echarts.init(ChartRef2.value);
      echart2Instance.value.setOption(setPieOptions(seriesData));
    });
  });
}

// 饼图2
function setChart3() {
  getCpGjzb({ ...route.query }).then((res) => {
    nextTick(() => {
      const seriesData = [
        { value: res?.[0]?.['本地'] || 0, name: '本地' }, 
        { value: res?.[0]?.['外地'] || 0, name: '外地' }
      ]
      echart3Instance.value = echarts.init(ChartRef3.value);
      echart3Instance.value.setOption(setPieOptions(seriesData));
    });  
  })
}

function handleClickBack() {
  router.go(-1);
}

window.addEventListener('resize', () => {
	echart1Instance.value && echart1Instance.value.resize({ animation: { duration: 300 } });
  echart2Instance.value && echart2Instance.value.resize({ animation: { duration: 300 } });
  echart3Instance.value && echart3Instance.value.resize({ animation: { duration: 300 } });
});

onMounted(() => {
  setChart1();
  setChart2();
  setChart3();
  setChart4();
});
</script>

<style lang="less" scoped>
.content {
  height: calc(100% - 65px);
  overflow: auto;
}
.card-ehcart {
  height: 264px; 
  width: 100%;
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0em;
  color: var(--color-text-1);
  padding-bottom: 12px;
}
</style>

<script>
export default {
  name: 'DetailPage',
}
</script>